<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.css" />
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/style1.css" />
		<style type="text/css">
		html,body{
			height:100%;
		}
			.mui-content {
				background-color: #222222;
				height:100%;
			}
			
			.welcome {
				padding: 40px 0 20px 30px;
			}
			/*label*/
			
			label {
				padding-left: 30px;
				width: 80px;
				height: 18px;
			}
			
			.showPlaceholder .placeholder {
				cursor: text;
				visibility: visible;
			}
			
			.placeholdermargintoprandom {
				margin-top: 14px;
				_margin-top: 14px;
			}
			
			.placeholder {
				background: transparent;
				color: #999999;
				font-size: 14px;
				left: 0;
				line-height: 14px;
				_line-height: 16px;
				position: absolute;
				margin-left: 57px;
				visibility: hidden;
			}
			/*小span*/
			
			.randomSpan {
				display: block;
				margin-top: 5px;
				border-radius: 18px;
				background-color: #FFFFFF;
				color: #272727;
				text-align: center;
				position: absolute;
				right: 0;
				top: -6px;
				padding: 6px 14px;
				font-size: 12px;
			}
			
			.white14 {
				font-size: 14px;
			}
			
			.regbtn {
				width: 80%!important;
				line-height: 30px!important;
				background-color: #666 !important;
				padding: 0 5px;
				border-radius: 20px!important;
				border: none;
				border: 1px solid #666!important;
			}
			
			input[type='button'] {
				color: #FFFFFF;
			}
			
			input[type='text'],
			input[type='password'] {
				color: white;
				background-color: #222222;
				border: none;
				border-bottom: 1px solid #fff;
				border-radius: 0;
				padding: 0;
			}

			.hps-logo-content {
					margin: 20px 25px;
			}
			.hps-ui-agreement {
				position: absolute;
				bottom: 15px;
				width: 100%;
				text-align: center;
				font-size: 12px;
			}
			.hps-ui-agreement span{
				color: #fff;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav" id='header'>
			<a class="white-mid mui-icon mui-icon-closeempty mui-pull-left" onclick="topagej('back')"></a>
			<h1 class="mui-title white-big"><i class="hps-logo"></i>黑皮书</h1>
		</header>
		<div class="mui-content mb0">
			<p class="white welcome">欢迎登陆黑皮书</p>
			<div class="hps-logo-content">
			<div class="tc hps-position-rel ">
				<input class="iptStyle mobile" data-value="手机号码" value="" placeholder="请输入手机号码" title="请输入手机号码" type="text" id="mobile" name="mobile" maxlength="50" autocomplete="off" style="" tabindex="1">
				<span class="randomSpan ie6Png" id="randomCode" onclick="getmsgcode()">获取随机码</span>
				
			</div>
			<div class="tc hps-position-rel">
				<input class="iptStyle mgsCode" autocomplete="off" data-value="" value="" title="获取验证码" placeholder="获取验证码" type="text" id="msgcode" name="msgcode" maxlength="16" tabindex="2">
				<label id="pwdPlaceholder" class="placeholder placeholdermargintoprandom" for="msgcode" title="">获取验证码</label>
			</div>
			<div class="tc hps-position-rel mt20">
				<input type="button" name="regbtn" id="regbtn" value="登录" class="white14 regbtn" onclick="mlogin()" />
				<!-- <input type="button" name="regbtn2" id="regbtn2" value="首页" class="white14 regbtn" style="margin-top: 5px;" onclick="topagej('home')" /> -->
			</div>
			</div>
			<p class="hps-ui-tip"><span class="mui-icon mui-icon-info"></span>手机注册可直接登录，无需注册</p>

			<p class="hps-ui-agreement">登录即表示同意 <span>《黑皮书用户协议》</span></p>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/setfontsize.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()

			function getmsgcode() {
				var mobile = $("#mobile").val();
				if(mobile == null) {
					return false;
				}
				mui.ajax(userurl + '/api/user/app/msgcode', {
					data: {
						mobile: mobile
					},
					dataType: 'json',
					type: 'post',
					success: function(data) {
						if(data.code == 1) {
							mui.toast('验证码发送成功', {
								duration: '2000ms',
								type: 'div'
							})
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						console.log(type);
					}
				});
			}

			function mlogin() {
				var mobile = $("#mobile").val();
				var msgcode = $("#msgcode").val();
				if(mobile == null || msgcode == null) {
					alert("手机号或验证码不为空");
					return false;
				}
				mui.ajax(userurl + '/api/user/app/mLogin', {
					data: {
						mobile: mobile,
						msgCode: msgcode
					},
					
					dataType: 'json',
					type: 'post',
					success: function(data) {
						if(data.code == 1) {
							localStorage.setItem("uid", data.data.uid);
							/*mui.openWindow({
							   url: 'person1.html'
							});*/
							//location.href="person1.html";
							topagej('back');
						} else {
							mui.toast('登陆失败', {
								duration: '2000ms',
								type: 'div'
							})
						}

					},

					error: function(xhr, type, errorThrown) {
						//异常处理；
						console.log(type);
					}
				});
			}

		</script>
	</body>

</html>